<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/SearchFriends.css"/>
	<link rel="stylesheet" type="text/css" href="css/heartChat.css"/>
	<link rel="stylesheet" href="css/modifyInfoPage.css" type="text/css">
	<link rel="icon" href="img/chat-icon.png" type="image/x-icon">

	<title>猿圈吹牛社区</title>
	<style>
		@font-face {
			font-family: 'icomoon';
			src:  url('/css/fonts/icomoon.eot?czbnho');
			src:  url('/css/fonts/icomoon.eot?czbnho#iefix') format('embedded-opentype'),
			url('/css/fonts/icomoon.ttf?czbnho') format('truetype'),
			url('/css/fonts/icomoon.woff?czbnho') format('woff'),
			url('/css/fonts/icomoon.svg?czbnho#icomoon') format('svg');
			font-weight: normal;
			font-style: normal;
			font-display: block;
		}
	</style>
</head>
<body style="overflow: hidden">
	<div class="window">
		<div class="home-part">
			<div id="chatmsg" class="home-part-navi"><span class="navi-count"></span></div>
			<div class="home-part-navi"></div>
			<div id="applymsg" class="home-part-navi"><span class="navi-count"></span></div>
			<div class="home-part-navi" id="add-btn" tabindex="10">
				<div id="add-list">
					<div class="add-list-item" id="add-friend-btn">+添加好友</div>
					<div class="add-list-item" id="group-create-btn">+发起群聊</div>
					<a href="/ctgu" target="_blank"><div class="add-list-item">自动报平安</div></a>
				</div>
			</div>
			<div id="setting-icon"></div>

			<div id="modify-part">
				<div id="my-chat-head-big-box">
					点击上传头像
					<img id="my-chat-head-big" th:src="@{'/img/user-icon/'+*{curUser.getUserNum()}+'.jpg'}">
					<div id="head-cover">点击上传头像</div>
				</div>
				<form>
					<input id="file-input" type="file" name="userIcon">
					<div><input id="icon-submit-btn" type="button" value="提交"></div>
					<div class="info-item">昵称：<span th:text="*{curUser.nickName}"></span></div>
					<div class="info-item">账号：<span th:text="*{curUser.userNum}"></span></div>
					<div class="info-item">电话号码：<span th:text="*{curUser.phoneNum}"></span></div>
					<div class="info-item">邮箱：<span th:text="*{curUser.email}"></span></div>
					<div class="info-item">性别：<span th:text="*{curUser.sex}"></span></div>
					<div class="info-item">年龄：<span th:text="*{curUser.age}"></span></div>
					<div class="info-item">创建时间：<span th:text="*{curUser.createdTime}"></span></div>
				</form>
				<div id="setting-footer">
					<div id="modify-myinfo">修改信息</div>
					<a href="/logout">
						<div>退出登录</div>
					</a>
				</div>
			</div>
		</div>


		<div class="link-list-part">
			<div class="list-header">
				<div id="my-head-box">
					<img id="my-chat-head" th:src="@{'/img/user-icon/'+*{curUser.getUserNum()}+'.jpg'}">
					<p id="my-nickname" th:text="*{curUser.nickName}">这里显示昵称</p>
					<p id="my-userNum" th:text="*{curUser.userNum}">这里显示账号</p>
				</div>
				<div id="group-create-box">
					<div>请选择好友发起群聊</div>
					<div id="group-add-cancel">取消</div>
					<div id="group-add-confirm">发起</div>
				</div>
				<input id="link-search" type="text" placeholder="输入好友或群聊名称">
			</div>
			<div id="chattingmsg" class="links-box beautiful-scrollbar">
				<form id="invite-form">

				<div data-Num="" data-userNum="" class="friend-items" title="" style="display: none">
					<input class="checkbox-for-friend" type="checkbox" name="toInviteFriends" value="">
					<img draggable="false" src="">
					<div class="link-info">
						<p class="friend-comment-p" >这里显示好友备注</p>
						<p class="nickname-p">这里显示好友昵称</p>
					</div>
				<div class="message-count"></div>
				</div>
				<div th:each="firend:${friendListInfoList}" th:data-Num="*{firend.userNum}" th:data-userNum="*{firend.userNum}" class="friend-items clearfix" th:title="*{firend.commentForFriend+'('+firend.nickName+')'}">
					<input class="checkbox-for-friend" type="checkbox" name="toInviteFriends" th:value="*{firend.userNum}">
					<img draggable="false" th:src="@{'/img/user-icon/'+*{firend.userNum}+'.jpg'}">
					<div class="link-info">
						<p class="friend-comment-p" th:text="*{firend.commentForFriend}">这里显示好友备注</p>
						<p class="nickname-p" th:text="*{firend.nickName}">这里显示好友昵称</p>
					</div>
					<div class="message-count"></div>
					<div class="operation-list">
						<a class="modify-comment-btn">修改备注</a>
						<a class="view-detail-btn">查看名片</a>
						<a class="delete-friend-btn">删除好友</a>
					</div>
					<div class="more-btn">•••</div>
					<input class="new-comment-input" th:value="*{firend.commentForFriend}" type="text"/>
				</div>
				</form>
				<div th:each="group:${groupAndUserList}" th:data-Num="*{group.groupNum}" th:data-groupNum="*{group.groupNum}" class="group-items" th:title="*{group.groupName+'('+group.groupNum+')'}">
					<img draggable="false" th:src="@{'/img/user-icon/'+*{group.groupNum}+'.jpg'}">
					<div class="link-info">
						<p class="friend-comment-p" th:text="*{group.groupName}">这里显示群名称</p>
						<p class="nickname-p" th:text="*{group.groupNum}">这里显示群号码</p>
					</div>
					<div class="message-count"></div>
					<div class="operation-list">
						<a class="modify-group-comment-btn">修改我的群昵称</a>
						<a class="view-group-detail-btn">查看群名片</a>
						<a class="exit-group-btn">退出群聊</a>
					</div>
					<div class="more-btn">•••</div>
					<input class="new-group-comment-input" th:value="${group.memberComment}" type="text"/>
				</div>
			</div>

<!--			系统消息显示区域-->
			<div id="systeminfo" class="links-box beautiful-scrollbar" style="display: none">
				<div class='system-items' style="display:none" data-num="" data-type-code="">
					<div class="time-label"></div>
					<p class='system-items-p1'></p>
					<p class="system-items-p2"></p>
					<p class="system-items-p3">
						<button class="refuse-btn">拒绝</button>
						<button class="agree-btn">同意</button>
					</p>
				</div>
			</div>
		</div>

		<div class="message-part">

			<div class="message-box-header">
				<p id="chat-box-title"></p>
				<p id="current-link-status"></p>
			</div>
			<div class="message-item-box beautiful-scrollbar">
<!--				这里面显示消息-->
			</div>
			<div class="message-input-box">
				<textarea title="换行请按Ctrl+Enter" autofocus id="pre-send-txt"></textarea>
				<div id="btn-box">
					<button id="close-btn" class="msgbtn">关闭</button>
					<button id="send-btn" title="按下Enter键" class="msgbtn">发送</button>
				</div>
			</div>
		</div>
	</div>

	<div id="friend-add-window">
		<div id="window-head">
			添加好友

			<div id="window-close-btn">&times;</div>
		</div>
		<div id="window-body">
			<div class="title">
				<div class="title1">
					<h1 class="headline1">查找好友/群组</h1>
				</div>
				<div class="title2">
					<a href="SearchFriend.html"><h1 class="headline2">找人</h1></a>
					<div></div>
				</div>
				<div class="title3">
					<a href="SearchGroup.html"><h1 class="headline3">找群</h1></a>
					<div></div>
				</div>
				<div class="title4"></div>
				<div class="title5">
					<a><h1 class="headline4">返回主页</h1></a>
					<div></div>
				</div>
			</div>
			<div class="total">
				<form id="Search" method="post">
					<div class="search">
						<input type="text" name="userNum" placeholder="请输入QQ号码/昵称" class="searchfriends">
					</div>
					<div class="btn">
						<input id="submit" type="button" value="查找" class="btnSearch">
						<div class="remindinfo"></div>
					</div>
					<div class="Select">
						<select class="select1" name="sex">
							<option selected hidden disabled>性别</option>
							<option value="">不限</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
						<select class="select2" name="age">
							<option selected hidden disabled>年龄</option>
							<option value="">不限</option>
							<option value="1">16-20岁</option>
							<option value="2">21-25岁</option>
						</select>
					</div>
				</form>
				<div style="width: 40%;height: 60px;float: left;">
					<label id="label1">验证消息</label>
					<input id="checkmsg" type="text">
				</div>
				<div class="table1">
					<table class="user">
						<thead>
						<tr>
							<td>QQ号码</td>
							<td>昵称</td>
							<td>添加好友</td>
						</tr>
						</thead>
						<tbody class="user_table">

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div id="cover-offline">
		<div id="remind-in-cover">您已掉线，为确保正常通信请刷新页面或者重新登录！</div>
	</div>
	<script src="/js/jquery-3.6.0.js"></script>
	<script src="/js/chat.js"></script>
	<script src="/js/modifyPage.js"></script>
</body>
</html>